<template>
  <div class="text-left relative">
    <!-- 移动端汉堡菜单按钮 -->
    <div class="md:hidden">
      <button @click="menuOpen = !menuOpen"
        class="flex items-center justify-between w-full bg-gray-900 text-white px-4 py-3">
        <span class="font-bold">定制选项</span>
        <i class="text-lg">☰</i>
      </button>
    </div>

    <!-- 菜单导航栏 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300  z-999999! absolute!" :class="{
      'hidden1': !menuOpen && isMobile,
      'fixed inset-0 z-50 w-64': menuOpen && isMobile,
      'md:static md:w-full': !isMobile
    }">
      <!-- 菜单标题 - 只在桌面端显示 -->
      <div class="hidden md:flex bg-gray-900 text-white px-4 py-3 font-bold">
        定制选项
      </div>

      <!-- 移动端关闭按钮 -->
      <div class="py-2" v-if="menuItems">
        <!-- 菜单项 -->
        <div v-for="(item, index) in menuItems" :key="index" :class="{
          'border-b border-gray-100': index !== menuItems.length - 1
        }">
          <!-- 主菜单项 - 处理有子菜单和无子菜单的情况 -->
          <div @click="handleMenuItemClick(item)"
            class="flex items-center justify-between px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors">
            <div class="flex items-center">
              <span class="w-5 h-5 mr-3 text-gray-500">
                <i :class="item.icon"></i>
              </span>
              <span class="font-medium text-gray-800">{{ item.title }}</span>
            </div>
            <!-- 只有在有子菜单时才显示箭头 -->
            <span v-if="hasSubMenu(item)" class="text-gray-400">
              <i :class="`transition-transform duration-300 block rotate--125`">
                ▶
              </i>
            </span>
          </div>

          <!-- 子菜单 - 仅在有子菜单且展开时显示 -->
          <div v-if="hasSubMenu(item)" v-show="openSubMenu === item.id" class="bg-gray-50">
            <div v-for="(child, childIndex) in item.children" :key="childIndex" @click.stop="selectChild(child.id)"
              class="px-12 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer transition-colors" :class="{
                'md:px-12': !isMobile,
                'px-8': isMobile
              }">
              {{ child.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LeftMenu">
import { ref, onMounted, onUnmounted, computed } from 'vue';

// 菜单项接口
interface MenuItem {
  id: string;
  title: string;
  icon: string;
  children?: { id: string; title: string }[];
}

// Props
const props = defineProps<{
  menuItems: MenuItem[]
}>()

// 状态管理
const openSubMenu = ref('1'); // 默认展开第一个菜单项
const activeItem = ref('1');
const activeChild = ref('1-1');
const menuOpen = ref(false); // 控制移动端菜单的显示和隐藏

// 计算属性：判断当前是否为移动设备
const isMobile = computed(() => {
  return window.innerWidth < 768;
});

// 处理窗口大小变化
const handleResize = () => {
  if (!isMobile.value) {
    menuOpen.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
// 辅助函数：检查菜单项是否有子菜单
// const hasSubMenu = (item: MenuItem): boolean => {
//   return item.children && Array.isArray(item.children) && item.children.length > 0;
// };
// // 处理菜单项点击
// const handleMenuItemClick = (item: MenuItem) => {
//   activeItem.value = item.id;

//   // 如果有子菜单，则切换子菜单显示状态
//   if (hasSubMenu(item)) {
//     openSubMenu.value = openSubMenu.value === item.id ? '' : item.id;
//   } else {
//     // 如果没有子菜单，则直接处理点击事件
//     // 这里可以添加无子菜单项目的点击处理逻辑
//     console.log(`点击了无子菜单的项目: ${item.title}`);
//     // 可以在这里触发页面内容的更新或其他操作
//   }
// };

// 处理子菜单项点击
const selectChild = (id: string) => {
  activeChild.value = id;
  // 在移动端选中子菜单后关闭菜单
  if (isMobile.value) {
    menuOpen.value = false;
  }
  // 这里可以添加处理子菜单项选中后的逻辑
  console.log(`选中了子菜单项: ${id}`);
};

// 处理主菜单项点击
const handleMenuItemClick = (item: MenuItem) => {
  activeItem.value = item.id;

  // 如果有子菜单，则切换子菜单显示状态
  if (hasSubMenu(item)) {
    openSubMenu.value = openSubMenu.value === item.id ? '' : item.id;
  } else {
    // 如果没有子菜单，则直接处理点击事件
    console.log(`点击了无子菜单的项目: ${item.title}`);
    // 在移动端点击无子菜单的项目后关闭菜单
    if (isMobile.value) {
      menuOpen.value = false;
    }
  }
};

// 辅助函数：检查菜单项是否有子菜单
const hasSubMenu = (item: MenuItem): boolean => {
  return item.children && Array.isArray(item.children) && item.children.length > 0;
};
</script>
